<template>
  <div ref="pageContentRef" class="content-box">
    <div ref="topRef" class="top">
      <slot name="search" />
    </div>
    <!-- <px-divider class="ho-divider" v-if="showDivider" /> -->
    <div ref="contentRef" class="content">
      <div ref="contentBtnRef" class="btn">
        <slot name="btn" />
      </div>
      <div class="table">
        <slot name="table" :height="containerHeight" />
      </div>
    </div>
    <div ref="footerRef" class="footer">
      <slot name="foot" />
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { useElementSize } from "@vueuse/core";
const topRef = ref();
const contentBtnRef = ref();
const footerRef = ref();
const pageContentRef = ref();
const { height: pageContentHeight } = useElementSize(pageContentRef);
const { height: topHeight } = useElementSize(topRef);
const { height: btnHeight } = useElementSize(contentBtnRef);
const { height: footerHeight } = useElementSize(footerRef);

defineProps({
  showDivider: {
    default: true
  }
});

const containerHeight = computed(() => Math.floor(pageContentHeight.value - topHeight.value - btnHeight.value - footerHeight.value - 28));
</script>
<style lang="scss" scoped>
.content-box {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 24px;
  background-color: #fff;
  // height: 100%;
  // .top {
  //   display: flex;
  //   justify-content: space-between;
  // }
  .ho-divider {
    width: 100%;
    margin: 8px 0;
  }

  .btn {
    // margin-top: 16px;
    margin-bottom: 8px;
  }

  .table {
    display: block;
    overflow-y: auto;

    .px-table {
      width: 100%;
    }
  }

  .footer {
    box-sizing: border-box;
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    padding: 6px;
  }
}
</style>
